//采购模块
var procurement = function(){

    var form = {}, grid = {};
    
    form.itemForm = function(){
    
        var saveHandler = function(){
            formPanel.getForm().submit({
                clientValidation: true,
                url: 'data/submit.json',
                success: function(m, a){
                    formPanel.collapse(false);
                    form.itemForm();
                },
                failure: function(m, a){
                }
            });
        };
        
        var formPanel = new Ext.form.FormPanel({
            title: '采购详情',
            width: 500,
            labelWidth: 60,
            padding: "5",
            frame: true,
            labelAlign: 'right',
            collapsible: true,
            items: [{
                xtype: 'textfield',
                fieldLabel: '名称',
                anchor: '100%'
            }, {
                xtype: 'textfield',
                fieldLabel: '货单号',
                anchor: '100%'
            }, {
                xtype: 'combo',
                fieldLabel: '供应商',
                anchor: '100%'
            }, {
                xtype: 'textfield',
                fieldLabel: '规格',
                width: 200
            }, {
                xtype: 'textfield',
                fieldLabel: '型号',
                width: 200
            }, {
                xtype: 'combo',
                fieldLabel: '用途',
                width: 200
            }, {
                xtype: 'textfield',
                fieldLabel: '数量',
                width: 200
            }, {
                xtype: 'numberfield',
                fieldLabel: '单价(元)',
                width: 200,
                value: 0
            }, {
                xtype: 'numberfield',
                fieldLabel: '总价(元)',
                width: 200,
                value: 0
            }, {
                xtype: 'textarea',
                fieldLabel: '备注',
                anchor: '100%'
            }],
            buttons: [{
                xtype: 'button',
                width: 100,
                text: '保存',
                handler: saveHandler
            }, {
                xtype: 'button',
                width: 130,
                text: '重置',
                style: 'padding-left: 15px;'
            }]
        });
        
        uiForm.add(formPanel);
        uiForm.doLayout();
    };
    form.baseForm = function(){
    
        var saveHandler = function(){
            formPanel.getForm().submit({
                clientValidation: true,
                url: 'data/submit.json',
                success: function(m, a){
                    formPanel.collapse(false);
                    form.itemForm();
                },
                failure: function(m, a){
                }
            });
        };
        
        var formPanel = new Ext.form.FormPanel({
            title: '基本单据',
            width: 500,
            labelWidth: 60,
            padding: "5",
            frame: true,
            labelAlign: 'right',
            collapsible: true,
            items: [{
                xtype: 'textfield',
                fieldLabel: '采购名称',
                anchor: '100%',
                maxLength: 255
            }, {
                xtype: 'datefield',
                fieldLabel: '采购时间',
                width: 177,
                format: 'Y-m-d'
            }, {
                fieldLabel: '金额(元)',
                xtype: 'numberfield',
                width: 177,
                value: 0
            }, {
                xtype: 'textarea',
                anchor: '100%',
                fieldLabel: '备注',
                maxLength: 255
            }],
            buttons: [{
                xtype: 'button',
                width: 100,
                text: '保存',
                handler: saveHandler
            }, {
                xtype: 'button',
                width: 130,
                text: '重置',
                style: 'padding-left: 15px;'
            }]
        });
        
        return formPanel;
    };
    
    grid.gridList = function(id){
    
        var expander = new Ext.ux.grid.RowExpander({
            tpl: new Ext.XTemplate('<div class="detailData">', '', '</div>')
        });
        expander.on("expand", function(expander, r, body, rowIndex){
            if (Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0) {
                var cm = new Ext.grid.ColumnModel([{
                    xtype: 'gridcolumn',
                    dataIndex: 'c1',
                    header: '名称'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c2',
                    header: '货单号'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c3',
                    header: '供应商'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c4',
                    header: '规格'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c5',
                    header: '型号'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c6',
                    header: '用途'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c7',
                    header: '数量'
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c8',
                    header: '单价(元)',
                    renderer: function(v){
                        return '<span style="color:#FF0000;">￥' + v + "</span>";
                    }
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c9',
                    header: '总价(元)',
                    renderer: function(v){
                        return '<span style="color:#FF0000;">￥' + v + "</span>";
                    }
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'c10',
                    id: 'c10',
                    header: '备注'
                }]);
                new Ext.grid.GridPanel({
                    store: new Ext.data.JsonStore({
                        autoDestroy: true,
                        url: 'data/data2.json',
                        root: 'ds',
                        autoLoad: true,
                        idProperty: 'id',
                        fields: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8', 'c9', 'c10']
                    }),
                    autoExpandColumn: 'c10',
                    loadMask: true,
                    stripeRows: true,
                    cm: cm,
                    renderTo: Ext.DomQuery.select("div.detailData", body)[0],
                    autoWidth: true,
                    autoHeight: true,
                    listeners: {
                        rowcontextmenu: function(g, r, e){
                            var contextMenu = new Ext.menu.Menu();
                            contextMenu.add({
                                text: "添加",
                                handler: function(){
                                    grid.addItemForm();
                                }
                            });
                            contextMenu.add({
                                text: "修改",
                                handler: function(){
                                }
                            });
                            contextMenu.add({
                                text: "删除",
                                handler: function(){
                                }
                            });
                            e.stopEvent();
                            contextMenu.showAt(e.xy);
                        },
                        mouseover: function(e){
                            e.stopEvent();
                        },
                        rowmousedown: function(g, r, e){
                            e.stopEvent();
                        },
                        rowdblclick: function(g, r, e){
                            e.stopEvent();
                        },
                        headerclick: function(g, c, e){
                            e.stopEvent();
                        }
                    }
                });
            }
        });
        
        var gridPanel = new Ext.grid.GridPanel({
            id: id,
            title: '采购单据',
            closable: true,
            loadMask: true,
            plugins: [expander],
            columnLines: true,
            columns: [expander, {
                xtype: 'gridcolumn',
                id: 'id',
                dataIndex: 'name',
                header: '采购名称',
                sortable: true,
                width: 300
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'username',
                header: '采购人',
                sortable: true,
                width: 130
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'date',
                header: '采购时间',
                sortable: true,
                width: 130
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'money',
                header: '总金额（元）',
                sortable: true,
                width: 130,
                renderer: function(v){
                    return '<span style="color:#FF0000;">￥' + v + "</span>";
                }
            }, {
                xtype: 'gridcolumn',
                id: 'rem',
                dataIndex: 'rem',
                header: '备注',
                sortable: true
            }],
            autoExpandColumn: 'rem',
            stripeRows: true,
            store: new Ext.data.JsonStore({
                autoDestroy: true,
                url: 'data/data1.json',
                root: 'ds',
                autoLoad: true,
                idProperty: 'id',
                fields: ['name', 'date', 'money', 'rem']
            }),
            bbar: {
                xtype: 'paging'
            },
            listeners: {
                rowcontextmenu: function(grid, rowIndex, e){
                    var contextMenu = new Ext.menu.Menu();
                    contextMenu.add({
                        text: "添加",
                        handler: function(){
                        
                        }
                    });
                    contextMenu.add({
                        text: "修改",
                        handler: function(){
                        }
                    });
                    contextMenu.add({
                        text: "删除",
                        handler: function(){
                        }
                    });
                    e.stopEvent();
                    contextMenu.showAt(e.xy);
                }
            },
            tbar: {
                xtype: 'toolbar',
                items: [{
                    xtype: 'label',
                    text: '采购名称：'
                }, {
                    xtype: 'textfield'
                }, {
                    xtype: 'label',
                    text: '采购时间：'
                }, {
                    xtype: 'datefield'
                }, {
                    xtype: 'label',
                    text: '总金额（元）：'
                }, {
                    xtype: 'textfield'
                }, {
                    xtype: 'button',
                    text: '查询',
                    width: 80
                }]
            }
        });
        
        return gridPanel;
    };
    
    grid.addItemForm = function(id){
        var win = new Ext.Window({
            autoWidth: true,
            autoHeight: true,
            title: '添加采购详情',
            constrain: true,
            frame: true,
            modal: true,
            items: [new Ext.form.FormPanel({
                width: 500,
                labelWidth: 60,
                padding: "5",
                frame: true,
                labelAlign: 'right',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '名称',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: '货单号',
                    anchor: '100%'
                }, {
                    xtype: 'combo',
                    fieldLabel: '供应商',
                    anchor: '100%'
                }, {
                    xtype: 'textfield',
                    fieldLabel: '规格',
                    width: 200
                }, {
                    xtype: 'textfield',
                    fieldLabel: '型号',
                    width: 200
                }, {
                    xtype: 'combo',
                    fieldLabel: '用途',
                    width: 200
                }, {
                    xtype: 'textfield',
                    fieldLabel: '数量',
                    width: 200
                }, {
                    xtype: 'numberfield',
                    fieldLabel: '单价(元)',
                    width: 200,
                    value: 0
                }, {
                    xtype: 'numberfield',
                    fieldLabel: '总价(元)',
                    width: 200,
                    value: 0
                }, {
                    xtype: 'textarea',
                    fieldLabel: '备注',
                    anchor: '100%'
                }],
                buttons: [{
                    xtype: 'button',
                    width: 100,
                    text: '保存',
                    handler: function(){
                    
                    }
                }, {
                    xtype: 'button',
                    width: 130,
                    text: '重置',
                    style: 'padding-left: 15px;'
                }]
            })]
        });
        win.show();
    };
    
    var uiForm, uiGrid;
    
    return {
        form: function(id){
            uiForm = new Ext.Panel({
                id: id,
                title: '采购开单',
                width: 400,
                padding: 10,
                layout: 'anchor',
                autoScroll: true,
                closable: true,
                items: [form.baseForm()]
            });
            return uiForm;
        },
        grid: function(id){
            uiGrid = grid.gridList(id);
            return uiGrid;
        }
    };
}();
